<template>
  <el-dialog :model-value="visible" :title="title" width="500" :close-on-click-modal="false" :show-close="false">
    <el-form ref="formRef" :model="form" :rules="formRules" label-width="auto">
      <el-form-item label="配件" prop="productPartId">
        <zw-select :data="productPartList" label-key="partName" value-key="guid" v-model:label="form.productPartName"
          v-model:value="form.productPartId"></zw-select>
      </el-form-item>
      <el-form-item label="单价" prop="price">
        <el-input disabled v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item label="数量" prop="count">
        <el-input type="number" :min="1" :step="1" v-model.number="form.count"></el-input>
      </el-form-item>
      <el-form-item label="合计">
        <el-input type="number" disabled v-model.number="form.totalPrice"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="emits('close')">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import type { OrderProductCheckPriceVO } from '@/server/afterSale/types';
import ZwSelect from '@/components/Form/ZwSelect.vue';
import ApiTree from '@/server/api-tree';
import type { FormInstance, FormRules } from 'element-plus';
import { reactive, ref, watch } from 'vue';
import type { ProductPartDTO } from '@/server/productPart/types';

const emits = defineEmits(["close", "save"])
const props = withDefaults(defineProps<{ visible: boolean, productCode: string, data: OrderProductCheckPriceVO | null }>(), {
  visible: false,
  productCode: "",
  data: null
});
const title = ref<string>("添加产品");
const form = ref<OrderProductCheckPriceVO>({
  guid: "",
  productPartId: "",
  productPartName: "",
  price: 0,
  count: 1,
  totalPrice: 0,
});
const formRef = ref<FormInstance>();
const formRules = reactive<FormRules<OrderProductCheckPriceVO>>({
  productPartId: [{ required: true, message: "产品配件不能为空" }],
  count: [{ required: true, message: "数量不能为空" }, { min: 1, message: "数量不能小于1", type: "number" }]
})
const initForm = () => {
  form.value = {
    guid: "",
    productPartId: "",
    productPartName: "",
    price: 0,
    count: 1,
    totalPrice: 0,
  }
}
const productPartList = ref<ProductPartDTO[]>([])
const getProductPartList = async () => {
  const { success, data } = await ApiTree.productPart.list(props.productCode);
  if (success) {
    productPartList.value = data;
  }
}
const submit = () => {
  if (!form.value.guid) {
    form.value.guid = Date.now().toString();
  }
  emits("save", form.value);
}
watch(() => form.value.count, () => {
  form.value.totalPrice = Number.parseFloat(((form.value.price * form.value.count * 100) / 100).toFixed(2));
}, { immediate: true })
watch(() => form.value.productPartId, () => {
  const part = productPartList.value.find(x => x.guid === form.value.productPartId);
  if (part) {
    form.value.price = part.price;
    form.value.totalPrice = Number.parseFloat(((form.value.price * form.value.count * 100) / 100).toFixed(2));
  }
})
watch(() => props.visible, () => {
  if (props.visible) {
    title.value = props.data ? `编辑产品配件` : "添加产品配件";
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    props.data ? form.value = { ...props.data } : initForm();
    getProductPartList();
  }
})
</script>
<style lang="scss" scope></style>
